<template>
  <div class="shouye">
    <div class="firt">
      <div class="waik">
        <div style="display: inline-flex; margin-top: 10px">
          <div class="sxx"></div>
          <span style="margin-left: 17px; font-size: 20px; color: #051232"
            >平均成交价排行</span
          >
        </div>
        <div class="lieb">
          <div v-for="(item, index) in averagePriceRank" class="yssss2">
            <img v-if="index == 0" src="../../assets/1.png" />
            <img v-if="index == 1" src="../../assets/2.png" />
            <img v-if="index == 2" src="../../assets/3.png" />
            <span v-if="index > 2" class="indd">{{ index + 1 }}</span>
            <span class="yinh">{{ item.bankName }}</span>
            <span class="zhi">{{ item.price }}</span>
          </div>
        </div>
      </div>
      <div class="waik2">
        <div style="display: inline-flex; margin-top: 10px">
          <div class="sxx"></div>
          <span style="margin-left: 17px; font-size: 20px; color: #051232"
            >累计交易量top5</span
          >
        </div>
        <div class="lieb">
          <div v-for="(item2, index) in totalTransactionRank" class="yssss">
            <img v-if="index == 0" src="../../assets/1.png" />
            <img v-if="index == 1" src="../../assets/2.png" />
            <img v-if="index == 2" src="../../assets/3.png" />
            <span v-if="index > 2" class="indd">{{ index + 1 }}</span>
            <span class="yinh">{{ item2.bankName }}</span>
            <span class="bi">{{ item2.totalTransactionNum }}笔</span>
            <span class="zhi2">{{ item2.totalTransactionPrice }}万元</span>
          </div>
        </div>
      </div>
      <div class="waik3">
        <div style="display: inline-flex; margin-top: 10px">
          <div class="sxx"></div>
          <span style="margin-left: 17px; font-size: 20px; color: #051232"
            >开户行排名</span
          >
        </div>
        <div class="lieb">
          <div v-for="(item3, index) in accountRank" class="yssss2">
            <img v-if="index == 0" src="../../assets/1.png" />
            <img v-if="index == 1" src="../../assets/2.png" />
            <img v-if="index == 2" src="../../assets/3.png" />
            <span v-if="index > 2" class="indd">{{ index + 1 }}</span>
            <span class="yinh">{{ item3.bankName }}</span>
            <span class="zhi">{{ item3.num }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="scond">
      <div class="echartsDiv">
        <div
          id="myChart"
          :style="{ width: '590px', height: '385px' }"
          class="echt"
        ></div>
        <!-- <div id="main" style="width: 100%;height:100%;margin-left: 20px;margin-top: 5px;"></div> -->
      </div>
      <div style="margin-left: 20px">
        <div
          id="chartLineBox"
          :style="{ width: '590px', height: '385px' }"
          class="echt"
        ></div>
      </div>
    </div>
  </div>
</template>
<style >
</style>

<script scoped>
import { getIndexData } from "@/api/leagues/app";
export default {
  data() {
    return {
      averagePriceRank: [],
      totalTransactionRank: [],
      accountRank: [],
      newAccountsTrend: [],
      transactionNum: [],
    };
  },
  mounted() {
    this.querychart();
  },
  //方法集合
  methods: {
    querychart() {
      getIndexData().then((data) => {
        if (data.data.data) {
          this.accountRank = data.data.data.accountRank;
          this.averagePriceRank = data.data.data.averagePriceRank;
          this.totalTransactionRank = data.data.data.totalTransactionRank;
          this.newAccountsTrend = data.data.data.newAccountsTrend;
          console.log(
            data.data.data.newAccountsTrend.Y,
            "data.data.data.newAccountsTrend"
          );
          console.log(
            data.data.data.newAccountsTrend.X,
            "data.data.data.newAccountsTrend"
          );
          this.transactionNum = data.data.data.transactionNum;
          this.drawLine();
          this.drawLine2();
        }
      });
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: { text: "近半年新开户用户趋势图" },
        tooltip: {},
        xAxis: {
          data: this.newAccountsTrend.X,
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "line",
            data: this.newAccountsTrend.Y,
          },
        ],
      });
    },
    drawLine2() {
      let myChart2 = this.$echarts.init(
        document.getElementById("chartLineBox")
      );
      // 指定图表的配置项和数据
      myChart2.setOption({
        title: { text: "近半年贴现交易量趋势图" },
        tooltip: {
          //设置tip提示
          trigger: "axis",
        },

        legend: {
          //设置区分（哪条线属于什么）
          data: ["交易笔数", "交易金额"],
        },
        color: ["#8AE09F", "#FA6F53"], //设置区分（每条线是什么颜色，和 legend 一一对应）
        xAxis: {
          //设置x轴
          type: "category",
          boundaryGap: false, //坐标轴两边不留白
          data: this.transactionNum.X,
          name: "", //X轴 name
          nameTextStyle: {
            //坐标轴名称的文字样式
            color: "#FA6F53",
            fontSize: 16,
            padding: [0, 0, 0, 20],
          },
          axisLine: {
            //坐标轴轴线相关设置。
            lineStyle: {
              color: "#0075FF",
            },
          },
        },
        yAxis: {
          name: "",
          nameTextStyle: {
            color: "#051232",
            fontSize: 20,
            padding: [0, 0, 10, 0],
          },
          axisLine: {
            lineStyle: {
              color: "#FA6F53",
            },
          },
          type: "value",
        },
        series: [
          {
            name: "交易笔数",
            data: this.transactionNum.YNum,
            type: "line", // 类型为折线图
            lineStyle: {
              // 线条样式 => 必须使用normal属性
              normal: {
                color: "#15BE6B",
              },
            },
          },
          {
            name: "交易金额",
            data: this.transactionNum.YPrice,
            type: "line",
            lineStyle: {
              normal: {
                color: "#FE680E",
              },
            },
          },
        ],
      });
    },
  },
};
</script>
<style>
.waik {
  width: 387px;
  height: 385px;
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06);
  border-radius: 6px 6px 10px 10px;
  margin-left: 20px;
}
.bi {
  width: 32px;
  height: 235px;
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #051232;
  line-height: 55px;
  margin-left: 79px;
  vertical-align: middle;
  overflow: hidden;
}
.indd {
  width: 10px;
  height: 14px;
  font-size: 30px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #051232;
  opacity: 0.5;
  margin-left: 10px;
  vertical-align: middle;
  overflow: hidden;
}
.waik2 {
  width: 387px;
  height: 385px;
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06);
  border-radius: 6px 6px 10px 10px;
  margin-left: 10px;
}
.waik3 {
  width: 387px;
  height: 385px;
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06);
  border-radius: 6px 6px 10px 10px;
  margin-left: 45px;
}
.yssss {
  display: inline-block;
  text-align: center;
  width: 340px;
  overflow: hidden;
  vertical-align: middle;
  margin-left: -18px;
}
.yssss2 {
  display: inline-block;
  text-align: center;
  width:283px;
  overflow: hidden;
  vertical-align: middle;
    margin-left: -18px;
}
.firt {
  display: flex;
}
.scond {
  display: flex;
  margin-top: 30px;
  margin-left: 21px;
}
.echt {
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06);
  border-radius: 6px 6px 10px 10px;
}
.yinh {
  width: 111px;
  height: 234px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #051232;
  line-height: 55px;
  margin-left: 20px;
  vertical-align: middle;
  overflow: hidden;
}
.zhi {
  width: 36px;
  height: 232px;
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #fe680e;
  line-height: 55px;
  margin-left: 127px;
}
.zhi2 {
  width: 36px;
  height: 232px;
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #fe680e;
  line-height: 55px;
  margin-left: 27px;
  vertical-align: middle;
  overflow: hidden;
}
.lieb {
  margin-left: 35px;
  margin-top: 13px;
}
.sxx {
  width: 3px;
  height: 27px;
  background: #0075ff;
}
.shouye {
  width: 1200px;
  /* height: 850px; */
  /* background: #ffffff; */
  /* box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 6%); */
  border-radius: 6px 6px 10px 10px;
  margin: 0 auto;
  position: relative;
  top: 50%;
}
</style>